<template>
	<view>
		<!-- 加入顶部图片方式与发布的barnav相同 -->
		<view style="width: 100%; height: auto; overflow: hidden;">
			<image class="box" mode="widthFix" src="../../static/image/banner.jpg"></image>
		</view>

		<ly-tree :tree-data="treeData" :ready="ready" node-key="id" :defaultExpandedKeys="defaultExpandedKeys"
			:accordion="true" @node-expand="handleNodeExpand" @node-click="handleNodeClick">
		</ly-tree>
	</view>
</template>

<script>
	import Vue from "vue"
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	import {
		getDepartments
	} from "@api"
	
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
				treeData: [],
				defaultExpandedKeys: [1]
			};
		},

		methods: {
			// uni-app中emit触发的方法只能接受一个参数，所以会回传一个对象，打印对象即可见到其中的内容
			handleNodeClick(obj) {
				//console.log('handleNodeClick', JSON.stringify(obj));
			},
			handleNodeExpand(obj) {
				//console.log('handleNodeExpand', JSON.stringify(obj));
			},
			parseData: (array) => {
				let id = 1;
				let treeData = [];
				let [jxArray, dqArray, xzArray, jfArray, zyArray] = [[],[],[],[],[]];
				/**
				 * 循环遍历数据，给数据进行分类
				 */
				array.forEach(n => {
					switch (n.pid) {
						case 3: {
							jxArray.push(n);
							break;
						}
						case 69: {
							zyArray.push(n);
							break;
						}
						case 1: {
							dqArray.push(n);
							break;
						}
						case 2: {
							xzArray.push(n);
							break;
						}
						case 4: {
							jfArray.push(n);
							break;
						}
					}
				});
				/**
				 * 给节点添加教学部门的数据
				 */
				treeData.push({
					label: {
						text: '教学部门',
						style: `color:#000000;font-size:38rpx;font-weight: 600;`
					},
					id: id++,
					children: getJXChildern()
				})
				treeData.push({
					label: {
						text: '党群部门',
						style: `color:#000000;font-size:38rpx;font-weight: 600;`
					},
					id: id++,
					children: getChildren(dqArray)
				})
				treeData.push({
					label: {
						text: `行政部门`,
						style: `color:#000000;font-size:38rpx;font-weight: 600;`
					},
					id: id++,
					children: getChildren(xzArray)
				})
				treeData.push({
					label: {
						text: '教辅部门',
						style: `color:#000000;font-size:38rpx;font-weight: 600;`
					},
					id: id++,
					children: getChildren(jfArray)
				})
				treeData.push({
					label: {
						text: '其他部门',
						style: `color:#000000;font-size:38rpx;font-weight: 600;`
					},
					id: id++,
					children: getChildren(zyArray)
				})
				return treeData;


				/**
				 * 通过数组生成节点数据
				 * @param {Object} arr 节点数据
				 */
				function getChildren(arr) {
					let a = [];
					/**
					 * 循环遍历数组，将节点的信息添加到节点树中
					 */
					arr.forEach(n => {
						a.push(...getInfo({
							text: n.name,
							style: `font-weight: 700;color:#313131;`
						}, n.year, n.certifiedNum));
					});
					/* // 去除最后一列空节点
					a.length=a.length>0?a.length-1:a.length; */
					return a;
				}
				/**
				 * 生成教学部门的节点
				 */
				function getJXChildern() {
					let a = [];
					/**
					 * 对教学部门(学院)的列表进行循环遍历，并将这个学院的信息和子部门(包含的专业)，添加到节点树中。
					 */
					jxArray.forEach(n => {
						a.push(...getInfo({
							text: n.name,
							style: `font-weight: 700;color:#313131;`
						}, n.year, n.certifiedNum, n.subCount));
						if (n.subCount > 0) {
							a.push({
								label: {
									text: `${n.name}子部门`,
									style: 'margin-left:-4px;color:#a2a2a2;'
								},
								id: id++,
								children: f(n.id)
							})
						}

					})
					return a;
				}

				/**
				 * 生成教学部门学院的子节点
				 * @param {Number} parentId 专业的父节点(学院)
				 */
				function f(parentId) {
					let a = [];
					/**
					 * 对专业的列表进行循环遍历，查找当前父节点为当前学院编号的专业添加到数组
					 */
					zyArray.forEach(n => {
						if (n.parentId === parentId) {
							a.push(...getInfo({
								text: n.name,
								style: `font-weight: :600;color:#636363;`
							}, {
								text: n.certifiedNum,
								style: `font-weight: :600;color:#a2a2a2;`
							}))
						}
					})
					/* // 去除最后一列空节点
					a.length=a.length>0?a.length-1:a.length; */
					return a;
				}

				function getInfo(name, year, count, childDept) {
					let n = [{
							id: id++,
							label: {
								text: `部门名称：${typeof name.text!=="undefined"?name.text:name}`,
								style: `${typeof name.style!=="undefined"?`margin-left:-38rpx;${name.style}`:`margin-left:-38rpx;`}`
							},
						},

					];
					return n;
				}
			}
		},
		onLoad() {
			let that = this;
			getDepartments()
				.then(res => {
					that.treeData = that.parseData(res);		
					console.log(JSON.stringify(that.treeData))
					that.ready = true;
				})
			// uni.request({
			// 		url: this.$t.URL.api + "/dept/all",
			// 		method: 'GET'
			// 	})
			// 	.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
			// 		var [error, res] = data;
			
			// 		that.treeData = that.parseData(res.data);
			
			// 		that.ready = true;
			// 	})

		},
	}
</script>

<style>
	.box {
		width: 100%;
		height: 300rpx;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: cover;
	}
	
	.top {
		width: 120%;
		height: 140rpx;
		margin-left: -30rpx;
		background-color: #e72908;
	}

	.collapse {
		width: 100%;
		height: auto;
		padding: 0 4rpx;
	}

	.list_box {
		display: flex;
		border-radius: 4rpx;
		width: 96%;
		position: relative;
		transition: all 0.3s;
	}

	.con_box {
		border-radius: 10rpx;
		background: #f9f9f9;
		padding-left: 10rpx;
		height: 0rpx;
		margin: 4rpx auto;
		width: 100%;
		position: relative;
		transition: all 0.3s;
		overflow: hidden;
	}


	.list_box:active {
		background: rgba(0, 0, 0, 0.1);
	}

	.club_img {
		margin-top: 14rpx;
		margin-left: 15rpx;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}

	.title_left {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.title {
		font-size: 38rpx;
		height: 60rpx;
		line-height: 76rpx;
		align-items: center;
	}

	.title_con {
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		align-items: center;
	}

	.club_member {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.br {
		margin: 0 auto;
		width: 96%;
		height: 2rpx;
		background: #ececec;
	}

	.smallspot {
		width: 10rpx;
		height: 10rpx;
		background: #e72908;
		margin: 0 0 0 20rpx;
		margin-top: 34rpx;
	}

	.smallspot_con {
		width: 10rpx;
		height: 10rpx;
		background: #e72908;
		margin: 0 0 0 20rpx;
		margin-top: 30rpx;
	}

	.icon_right {
		position: absolute;
		right: 40rpx;
		top: 34rpx;
		transition: all 0.3s;
	}

	.icon_bottom {
		position: absolute;
		right: 40rpx;
		top: 34rpx;
		transition: all 0.3s;
		transform: rotate(90deg);
	}
</style>
